<template>
  <header>
    <p class="title">{{ title }}</p>
    <div class="right">


      <!-- <div class="time-wrap font">
        <span class="date">{{ currentDate }}</span>
        <span class="time">{{ currentTime }}</span>
      </div> -->

    </div>
  </header>
</template>
<script>
import { mapState } from "vuex";

export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    showSystemManagement: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentDate: "",
      currentTime: "",
      timer: null,
      isManager: false,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goManager() {
      this.$router.push("/system/project");
    },
    updateDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      this.currentDate = `${year}.${month}.${day}`;
      this.currentTime = `${hours}:${minutes}`;
    },
    getIsManager() {
      const [roles] = this.userInfo.roles;
      const { roleName } = roles;
      // 角色名称中是否包含 '管理员' 字样
      this.isManager = roleName.includes("管理员");
    },
  },

  mounted() {
    this.updateDateTime();
    this.timer = setInterval(() => {
      this.updateDateTime();
    }, 10000);
    // this.getIsManager();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style scoped lang='scss'>
header {
  height: 93px;
  background: url("~@/assets/waterLevel/nav_bg.png");
  // background-color: rgba(0, 0, 0, 0.6);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-left: vw(700px);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 6;
  animation: slideAndFade 3s;

  .title {
    font-size: 52px;
    font-family: "YouSheBiaoTiHei", Sans-serif, serif;
    background-image: linear-gradient(to bottom, #edfbff, #c7feff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-align: center;
    margin: 0 auto;
    white-space: nowrap;
  }
  .font {
    color: #64d8e3;
  }

  .right {
    flex: 1;
    justify-content: flex-end;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: vw(30px);
    box-sizing: border-box;

    .back-btn {
      width: vw(100px);
      height: vh(40px);
      border-radius: vh(4px);
      border: vh(1px) solid #5ac4ce;
      font-size: vh(18px);
      text-align: center;
      line-height: vh(40px);
      margin-right: vw(36px);
      cursor: pointer;
    }

    .time-wrap {
      border: 1px solid bule;
      margin-right: vw(36px);
      font-size: vh(36px);
      .date {
        margin-right: vw(19px);
      }
    }
    .loca-wrap {
      display: flex;
      align-items: center;
      .loca {
        font-size: vh(18px);
        white-space: nowrap;
      }
      .manage-btn {
        width: vw(100px);
        height: vh(40px);
        border-radius: vh(4px);
        border: vh(1px) solid #5ac4ce;
        font-size: vh(18px);
        text-align: center;
        line-height: vh(40px);
        cursor: pointer;
        margin-left: vw(36px);
      }
    }
  }
  @keyframes slideAndFade {
    0% {
      transform: translateY(-100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
}
</style>
